const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 配置入口
    entry: './src/main.js',
    // 配置出口
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js',
    },
    // 安装插件
    plugins: [new HtmlWebpackPlugin({
        template: path.join(__dirname,'public/index.html')
    })],
    module: {
        rules: [
          {
            // 匹配 css 结尾的文件，webpack 打包时如果碰到 css 文件，会自动交给下面的 loader 来处理
            test: /\.css$/i,
            // 从右向左
            use: ["style-loader", "css-loader",],
          },
          {
            test: /\.less$/i,
            use: [
              // compiles Less to CSS
              'style-loader',
              'css-loader',
              'less-loader',
            ],
          },
          { // 针对资源模块（图片，字体文件，图标文件等）处理
            test: /\.(png|jpg|jpeg|gif)$/i,
            type: 'asset', // 根据文件大小（8KB）小于：把文件转成 base64 打包进 js 文件中（减少网络请求次数）大于：文件复制到输出的目录下
            generator: { // 输出文件时，路径+名字
              filename: 'assets/[hash][ext]'
            }
          },
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          }
        ],
      },
      // 把代码位置信息一起打包
    devtool: 'inline-source-map',
    resolve: {
      alias: {
        MyUtils: path.resolve(__dirname, 'src/utils'),
        '@': path.resolve(__dirname, 'src')
      }
    }
}
